// 线性布局 Column /Row
// Expanded 弹性布局
// Stack堆叠布局
import 'package:flutter/material.dart';

class ContainerCom extends StatelessWidget {
const ContainerCom({ super.key });

  @override
  Widget build(BuildContext context){
    
    return Container(
      width: 400,
      height: 800,
      color: Colors.amber,
      child: const Row(
       // mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
       //mainAxisAlignment: MainAxisAlignment.end, // 底部对齐
      //  mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 均分
       mainAxisAlignment: MainAxisAlignment.center, // 两头对齐
      // crossAxisAlignment: CrossAxisAlignment.center , // 副轴对齐方式居中
    //  crossAxisAlignment: CrossAxisAlignment.start, // 居左
      // crossAxisAlignment: CrossAxisAlignment.end, // 
      crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text("上", style: TextStyle(fontSize: 40)),
          Text("中", style: TextStyle(fontSize: 40)),
          Text("下",  style: TextStyle(fontSize: 40))

        ],
      ),
    );

  }
}

class ExpandedCom extends StatelessWidget {
const ExpandedCom({ super.key });

  @override
  Widget build(BuildContext context){
    return Container(
      width: 400,
      height: 800,
      color: Colors.amber,
      child: Row(
        children: [
          Expanded(
            //flex: 4,
            child: Container(
            color: Colors.green,
            height: 120,
          )),
         Expanded(
        //  flex: 4,
          child: Container(
            color: Colors.blue,
             height: 120,
          )),
          Expanded(
         //   flex: 4,
            child: Container(
            color: Colors.brown,
             height: 120,
          ))
        ],
      ),
    );
  }
}

class StackCom extends StatelessWidget {
const StackCom({ super.key });

  @override
  Widget build(BuildContext context){
    return Container(
      width: 400,
      height: 800,
      color: Colors.amber,
      child:  Stack(
        clipBehavior: Clip.none,
        alignment: Alignment.topRight,
        children: [
          Container(
            width: 300,
            height: 300,
            color: Colors.blue,
          ),
          Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ), 
          Container(
            width: 100,
            height: 100,
            color: Colors.brown,
          ),
          Positioned(
            left: 140,
            top: -40,
            child: 
            Image.network("https://img2.baidu.com/it/u=1660498980,1871057&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
               width: 150,
               height: 80,
            )

          )
        ],
      ),
    );
  }
}